<template>
  <div>
    <f-table ref="tableRef" @register="register">
      <template #header-left>
        <el-button type="primary" @click="handleSyncDepartment">{{ t('sync.department') }}</el-button>
        <el-button type="primary" @click="handleSyncEmployee">{{ t('sync.employee') }}</el-button>
        <el-button @click="handleExport">{{ t('export') }}</el-button>
      </template>

      <template #name="{ row }">
        <div class="flex">
          <el-avatar :src="row.avatar" :icon="UserFilled"></el-avatar>
          <div class="flex-1 ml-[10px] overflow-hidden">
            <p>{{t('table.nickname')}}: <span>{{ row.name||'--' }}</span></p>
            <p>{{t('table.mobile')}}: <span>{{ row.mobile||'--' }}</span></p>
          </div>
        </div>
      </template>
      <template #department="{ row }">
        <span v-if="row.departments.length==0">--</span>
        <el-tag v-for="item in row.departments" :key="item" type="info">{{ item.name }}</el-tag>
      </template>
      <template #status="{ row }">
        <!-- '激活状态: 1=已激活，2=已禁用，4=未激活，5=退出企业' -->
        <el-tag v-if="row.status==0" type="danger">{{ t('table.status.init') }}</el-tag>
        <el-tag v-if="row.status==1" type="success">{{ t('table.status.active') }}</el-tag>
        <el-tag v-if="row.status==2" type="primary">{{ t('table.status.disable') }}</el-tag>
        <el-tag v-if="row.status==4" type="danger">{{ t('table.status.inactive') }}</el-tag>
        <el-tag v-if="row.status==5" type="info">{{ t('table.status.quit') }}</el-tag>
      </template>
      <template #action="{ row }">
        <el-space wrap>
            <el-button type="primary" link @click="handleDelete(row)">{{ t('delete') }}</el-button>
        </el-space>
      </template>
    </f-table>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { t } from '@/lang'
import FTable, { BasicColumn, useTable } from '@/addon/htscrm/components/f-table'
import { tableColumns, tableSearchFormItems } from '@/addon/htscrm/data/store.employee'
import { deleteEmployeeApi, getDepartmentApi, getEmployeeListApi, syncDepartmentApi, syncEmployeeApi } from '@/addon/htscrm/api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { UserFilled } from '@element-plus/icons-vue'

const tableRef = ref()
const { methods, register } = useTable({
    rowKey: 'id',
    searchFromItems: tableSearchFormItems(t),
    columns: tableColumns(t) as BasicColumn<IEmployeeItem>[],
    beforeFetch: (opt) => opt,
    api: async (opt) => (await getEmployeeListApi(opt)).data
})

/**
* @description 删除数据
*/
async function handleDelete (row: IEmployeeItem) {
    const action = await ElMessageBox.alert(t('deleteTips'), t('alert.title'), {
        type: 'warning',
        showCancelButton: true,
        cancelButtonText: t('alert.cancel'),
        confirmButtonText: t('alert.confirm')
    })
    if (action === 'confirm') {
        await deleteEmployeeApi(row.id)
        ElMessage.success(t('deleteSuccess'))
        methods.reload()
    }
}

/**
 * @description 同步部门
 */
async function handleSyncDepartment () {
    await syncDepartmentApi()
    ElMessage.success(t('sync.success'))
}

/**
 * @description 同步员工
 */
async function handleSyncEmployee () {
    await syncEmployeeApi()
    ElMessage.success(t('sync.success'))
}

async function getDepartmentList () {
    const res = await getDepartmentApi()
    const searchFromItems = tableSearchFormItems(t)
    searchFromItems[2].childrenComponent.children = res.data.map(item => {
        return {
            label: item.name,
            value: item.id
        }
    })
    methods.setFormItems(searchFromItems)
}

/**
 * @description 导出
 */
async function handleExport () {
    console.log(1)
}

onMounted(() => {
    getDepartmentList()
})

</script>

<style lang="scss" scoped>
</style>
